跳到主要内容

插值(缓动)(Interpolation (Easing))

Youtube

当您在一个属性上设置两个关键帧时,这些关键帧之间的值会自动计算。这称为插值。插值设置可以自定义以创建截然不同的效果。

您可以通过使用时间轴右侧的插值面板,或使用图表编辑器(可以通过时间轴选项附近的快捷方式切换)来设置关键帧的缓动。

使用插值面板(Using the Interpolation Panel)

当您在时间轴上选择任意数量的关键帧时,插值面板会出现在时间轴的右侧。

图片

插值图是一个视觉表示,显示了从所选关键帧到下一个关键帧期间值如何随时间变化,其中 x 轴表示时间,y 轴表示所选属性的变化。

您可以通过选择图表上方的任何图标来选择要使用的插值类型。

线性(Linear)

图片

线性是默认的插值类型,它创建从一个关键帧值到下一个值的恒定变化率。

三次曲线(Cubic)

图片

三次曲线插值使用曲线在关键帧值之间进行插值。它提供了两个可以拖动来自定义曲线的手柄。

您可以在 Y 轴上随意拖动手柄。如果您将手柄拖到图表外部,图表视图会更新以确保手柄始终可见。

默认的三次曲线从第一个关键帧到下一个关键帧创建一个平缓的曲线,这导致值在开始和结束时变化缓慢,在中间变化最大。

保持(Hold)

图片

保持不会在关键帧之间插值。它只是保持当前值,直到达到下一个关键帧,此时立即设置下一个值。

插值字段(Interpolation Field)

预览图下方的文本字段以数字格式表示插值。总共四个值(通常在 0 和 1 之间)表示手柄的位置 - 两个用于入曲线,两个用于出曲线。您可以通过在预览窗口中拖动手柄来查看这些值如何变化。

如果您希望设置特定的缓动值(例如为特定品牌定义的设计语言中的值),可以使用此字段。该字段还使得在文件和工具之间复制和粘贴值变得容易。

手动输入值时,使用逗号或空格来分隔四个值。

图片

图表编辑器(The Graph Editor)

Rive 的图表编辑器直观地表示对象的属性如何随时间变化。使用此图表,我们可以编辑变化率和被插值的值。

启用图表编辑器(Enabling the Graph Editor)

使用时间轴上的图表编辑器按钮来启用图表编辑器。您会注意到图表编辑器替换了时间轴。

注意,只有被选中的对象才会出现在图表编辑器中。

使用图表编辑器(Using the Graph Editor)

图表编辑器提供了当前插值的可视化表示。您有两种方式来编辑图表上的插值。

使用三次曲线插值(Using Cubic Interpolation)

如果您在插值面板中使用三次曲线插值,您需要在插值面板中调整插值。

使用三次曲线值(Using Cubic Value)

在插值面板中使用三次曲线值选项将使您能够直接在图表上调整插值。与三次曲线插值不同,三次曲线值可以影响动画属性的实际值。